import React, { Component, PureComponent } from 'react';
import {
    Text,
    View,
    Image,
    StyleSheet,
    FlatList,
    TextInput,
    RefreshControl,
    TouchableOpacity,
    DeviceEventEmitter,
    AsyncStorage,
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import ScrollableTabView, { ScrollableTabBar } from 'react-native-scrollable-tab-view';
import actioncoll from '../actions'
import {connect} from 'react-redux'
import NavigationBar from '../components/NavigationBar';
import ViewUtils from '../utils/ViewUtils';
import Session from '../utils/SessionUtils';

import TodoListTab from './home/TodoListTab'
import NewsListTab from './home/NewsListTab'


class home extends Component {

    constructor(props) {
        super(props);
    }


    componentDidMount() {
        this.props.GetNewsCategory();
    }

    render() {

        let content = this.props.newsCategory.items.length > 0 ?
            <ScrollableTabView
                renderTabBar={() => <ScrollableTabBar />}
                tabBarBackgroundColor='#2196F3'
                tabBarInactiveTextColor='mintcream'
                tabBarActiveTextColor='white'
                tabBarUnderlineStyle={{ backgroundColor: '#e7e7e7', height: 4 }}>
                {/* <TodoListTab key={'todo'} tabLabel="待办" /> */}
                {this.props.newsCategory.items.map((reuslt, i, arr) => {
                    let category = arr[i];
                    return <NewsListTab key={category.ID} categoryID={category.ID} tabLabel={category.CATEGORY_NAME} {...this.props} />;
                })}
            </ScrollableTabView> : null;

        return (
            <View style={styles.container}>
                <NavigationBar
                    rightButton={ViewUtils.getRightButton('登陆', () => Actions.login())}
                    leftButton={ViewUtils.getRightButton('退出', () => { AsyncStorage.removeItem('islogin'); Actions.PopupTest(); })}
                    title="主页"
                />
                {content}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    }
})


export default connect(
	(state) => ({
        newsCategory: state.homeReducer.newsCategory
	}),
	(dispatch) => ({
		GetNewsCategory:()=> dispatch(actioncoll.home.GetNewsCategory()),
	})
  )(home)